<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="keywords" content="关键词一,关键词二," />
    <meta name="Description" content="页面描述" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>专区页面</title>
    <link rel="stylesheet" href="style/swiper-3.4.2.min.css">
    <link rel="stylesheet" href="style/style.css">
    <link rel="stylesheet" href="style/zhuanqu.css">
    <script src="js/zepto.min.js"></script>
</head>

<body>

    <div class="wraper">
        <!--头部-->
        <header class="header">
            <h1 class="hd_logo"><a href="###">爱拍原创</a></h1>
            <div class="hd_right">
                <a class="r_search" href="###">搜索</a>
                <a class="r_user" href="###">用户</a>
            </div>
        </header>
        <!--滑动导航-->
        <nav class="nav_top">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><a href="###">热门</a></div>
                <div class="swiper-slide cur"><a href="###">穿越火线</a></div>
                <div class="swiper-slide"><a href="###">王者荣耀</a></div>
                <div class="swiper-slide"><a href="###">我的世界</a></div>
                <div class="swiper-slide"><a href="###">英雄联盟</a></div>
                <div class="swiper-slide"><a href="###">王者荣耀</a></div>
                <div class="swiper-slide"><a href="###">王者荣耀</a></div>
                <div class="swiper-slide"><a href="###">我的世界</a></div>
                <div class="swiper-slide"><a href="###">英雄联盟</a></div>
                <div class="swiper-slide"><a href="###">王者荣耀</a></div>
            </div>
        </nav>
        <div class="wrapin">
            <!--焦点图-->
            <section class="mod_focus">
                <ul class="swiper-wrapper">
                    <li class="swiper-slide">
                        <a href="###"><img src="images/pic/img1.jpg" alt=""></a>
                    </li>
                    <li class="swiper-slide">
                        <a href="###"><img src="images/pic/img1.jpg" alt=""></a>
                    </li>
                    <li class="swiper-slide">
                        <a href="###"><img src="images/pic/img1.jpg" alt=""></a>
                    </li>
                    <li class="swiper-slide">
                        <a href="###"><img src="images/pic/img1.jpg" alt=""></a>
                    </li>
                </ul>
                <div class="swiper-pagination"></div>
            </section>
            <!--精彩推荐-->
            <section class="mod_tj">
                <div class="mod_hd">
                    <div class="hd_left"><span class="ico"></span><span class="title">精彩推荐</span></div>
                    <div class="hd_right"><span class="replace">换一批</span></div>
                </div>
                <div class="mod_bd">
                    <ul>
                        <li>
                            <div class="con">
                                <a href="###" class="pic"><img src="images/pic/img2.jpg" alt=""></a>
                                <a href="###" class="user_img"> <img src="images/pic/big.jpg"></a>
                                <div class="user_info">
                                    <div class="left cell"> <span class="user_ico"></span> <a href="###" class="name">Fawcus-霜冷</a> </div>
                                    <div class="right cell">
                                        <span class="play_num">5.2万</span> <span class="play_ico"></span> </div>
                                </div>
                            </div>
                            <p class="title">黑科技刷上最高分的秘籍！五星开始速度炼成！</p>
                        </li>
                        <li>
                            <div class="con">
                                <a href="###" class="pic"><img src="images/pic/img2.jpg" alt=""></a>
                                <a href="###" class="user_img"> <img src="images/pic/big.jpg"></a>
                                <div class="user_info">
                                    <div class="left cell"> <span class="user_ico"></span> <a href="###" class="name">Fawcus-霜冷</a> </div>
                                    <div class="right cell">
                                        <span class="play_num">5.2万</span> <span class="play_ico"></span> </div>
                                </div>
                            </div>
                            <p class="title">黑科技刷上最高分的秘籍！五星开始速度炼成！</p>
                        </li>
                        <li>
                            <div class="con">
                                <a href="###" class="pic"><img src="images/pic/img2.jpg" alt=""></a>
                                <a href="###" class="user_img"> <img src="images/pic/big.jpg"></a>
                                <div class="user_info">
                                    <div class="left cell"> <span class="user_ico"></span> <a href="###" class="name">Fawcus-霜冷</a> </div>
                                    <div class="right cell">
                                        <span class="play_num">5.2万</span> <span class="play_ico"></span> </div>
                                </div>
                            </div>
                            <p class="title">黑科技刷上最高分的秘籍！五星开始速度炼成！</p>
                        </li>
                        <li>
                            <div class="con">
                                <a href="###" class="pic"><img src="images/pic/img2.jpg" alt=""></a>
                                <a href="###" class="user_img"> <img src="images/pic/big.jpg"></a>
                                <div class="user_info">
                                    <div class="left cell"> <span class="user_ico"></span> <a href="###" class="name">Fawcus-霜冷</a> </div>
                                    <div class="right cell">
                                        <span class="play_num">5.2万</span> <span class="play_ico"></span> </div>
                                </div>
                            </div>
                            <p class="title">黑科技刷上最高分的秘籍！五星开始速度炼成！</p>
                        </li>
                    </ul>
                </div>
            </section>

            <div class="main">
                <div class="nav_tab">
                    <ul>
                        <li class="cur"><span>顶顶</span></li>
                        <li><span>榜单</span></li>
                        <li><span>大神</span></li>
                        <li><span>专题</span></li>
                    </ul>
                </div>
                <div class="main_con" id="tabs-container">
                    <div class="swiper-wrapper">
                        <section class="mod_dingding swiper-slide">
                            <div class="item">
                                <div class="it_user">
                                    <a class="a_home" href="#"><img src="images/pic/big.jpg"></a>
                                </div>
                                <div class="it_con">
                                    <span class="fans"><span class="fans_con"><em class="f1">粉他</em></span></span>
                                    <div class="it_hd">
                                        <a href="###">雷音</a>
                                    </div>
                                    <div class="it_bd">
                                        <article class="title">
                                            <a href="###">
                                                <p>穿越火线能源站BUG很简单：如果第一次接触BUG最好卡的BUG就是这个掌握一些技巧马上就能进BUG</p>
                                            </a>
                                        </article>
                                        <div class="vide">
                                            <a href="###" class="pic"><img src="images/pic/img2.jpg" alt=""><span class="play">1000</span></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="item">
                                <div class="it_user">
                                    <a class="a_home" href="#"><img src="images/pic/big.jpg"></a>
                                </div>
                                <div class="it_con">
                                    <a href="###" class="it_tg">我要推广</a></span>
                                    <div class="it_hd">
                                        <a href="###">雷音</a>
                                    </div>
                                    <div class="it_bd">
                                        <article class="title">
                                            <a href="###">
                                                <p><span class="tui">[推]</span>我要推广我要推广</p>
                                            </a>
                                        </article>
                                        <div class="vide">
                                            <a href="###" class="pic"><img src="images/pic/img2.jpg" alt=""><span class="play">1000</span></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="item">
                                <div class="it_user">
                                    <a class="a_home" href="#"><img src="images/pic/big.jpg"></a>
                                </div>
                                <div class="it_con">
                                    <span class="fans"><span class="fans_con"><em class="f1">粉他</em></span></span>
                                    <div class="it_hd">
                                        <a href="###">雷音</a>
                                    </div>
                                    <div class="it_bd">
                                        <article class="title">
                                            <a href="###">
                                                <p>穿越火线能源站BUG很简单：如果第一次接触BUG最好卡的BUG就是这个掌握一些技巧马上就能进BUG</p>
                                            </a>
                                        </article>
                                        <div class="vide">
                                            <a href="###" class="pic"><img src="images/pic/img2.jpg" alt=""><span class="play">1000</span></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="item">
                                <div class="it_user">
                                    <a class="a_home" href="#"><img src="images/pic/big.jpg"></a>
                                </div>
                                <div class="it_con">
                                    <span class="fans"><span class="fans_con"><em class="f1">粉他</em></span></span>
                                    <div class="it_hd">
                                        <a href="###">雷音</a>
                                    </div>
                                    <div class="it_bd">
                                        <article class="title">
                                            <a href="###">
                                                <p>穿越火线能源站BUG很简单：如果第一次接触BUG最好卡的BUG就是这个掌握一些技巧马上就能进BUG</p>
                                            </a>
                                        </article>
                                        <div class="vide">
                                            <a href="###" class="pic"><img src="images/pic/img2.jpg" alt=""><span class="play">1000</span></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="item">
                                <div class="it_user">
                                    <a class="a_home" href="#"><img src="images/pic/big.jpg"></a>
                                </div>
                                <div class="it_con">
                                    <span class="fans"><span class="fans_con"><em class="f1">粉他</em></span></span>
                                    <div class="it_hd">
                                        <a href="###">雷音</a>
                                    </div>
                                    <div class="it_bd">
                                        <article class="title">
                                            <a href="###">
                                                <p>穿越火线能源站BUG很简单：如果第一次接触BUG最好卡的BUG就是这个掌握一些技巧马上就能进BUG</p>
                                            </a>
                                        </article>
                                        <div class="vide">
                                            <a href="###" class="pic"><img src="images/pic/img2.jpg" alt=""><span class="play">1000</span></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="item">
                                <div class="it_user">
                                    <a class="a_home" href="#"><img src="images/pic/big.jpg"></a>
                                </div>
                                <div class="it_con">
                                    <span class="fans"><span class="fans_con"><em class="f1">粉他</em></span></span>
                                    <div class="it_hd">
                                        <a href="###">雷音</a>
                                    </div>
                                    <div class="it_bd">
                                        <article class="title">
                                            <a href="###">
                                                <p>穿越火线能源站BUG很简单：如果第一次接触BUG最好卡的BUG就是这个掌握一些技巧马上就能进BUG</p>
                                            </a>
                                        </article>
                                        <div class="vide">
                                            <a href="###" class="pic">
                                                <img src="images/pic/img2.jpg" alt="">
                                                <span class="play">1000</span>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </section>
                        <section class="mod_bangdan swiper-slide">
                            <div class="item">
                                <div class="item_con">
                                    <a href="###" class="vide_pic">
                                        <span class="jing">精</span>
                                        <img src="images/pic/img3.jpg" alt="">
                                    </a>
                                    <div class="vide_info">
                                        <p class="vd_title"><a href="###">手动阀多敷法多法达多富达法索多敷</a></p>
                                        <p class="vd_user"><span class="user_ico"></span><a href="###" class="user_name">雷音</a></p>
                                        <p class="vd_info"><span class="info_ico"></span><span class="info_num">500</span></p>
                                    </div>
                                    <span class="num">1</span>
                                </div>
                            </div>
                            <div class="item">
                                <div class="item_con">
                                    <a href="###" class="vide_pic">
                                        <span class="jing">精</span>
                                        <img src="images/pic/img3.jpg" alt="">
                                    </a>
                                    <div class="vide_info">
                                        <p class="vd_title"><a href="###">手动阀多敷法多法达多富达法索多敷</a></p>
                                        <p class="vd_user"><span class="user_ico"></span><a href="###" class="user_name">雷音</a></p>
                                        <p class="vd_info"><span class="info_ico"></span><span class="info_num">500</span></p>
                                    </div>
                                    <span class="num">2</span>
                                </div>
                            </div>
                            <div class="item">
                                <div class="item_con">
                                    <a href="###" class="vide_pic">
                                        <span class="jing">精</span>
                                        <img src="images/pic/img3.jpg" alt="">
                                    </a>
                                    <div class="vide_info">
                                        <p class="vd_title"><a href="###">手动阀多敷法多法达多富达法索多敷</a></p>
                                        <p class="vd_user"><span class="user_ico"></span><a href="###" class="user_name">雷音</a></p>
                                        <p class="vd_info"><span class="info_ico"></span><span class="info_num">500</span></p>
                                    </div>
                                    <span class="num">3</span>
                                </div>
                            </div>
                            <div class="item">
                                <div class="item_con">
                                    <a href="###" class="vide_pic">
                                        <span class="jing">精</span>
                                        <img src="images/pic/img3.jpg" alt="">
                                    </a>
                                    <div class="vide_info">
                                        <p class="vd_title"><a href="###">手动阀多敷法多法达多富达法索多敷</a></p>
                                        <p class="vd_user"><span class="user_ico"></span><a href="###" class="user_name">雷音</a></p>
                                        <p class="vd_info"><span class="info_ico"></span><span class="info_num">500</span></p>
                                    </div>
                                    <span class="num">4</span>
                                </div>
                            </div>
                            <div class="item">
                                <div class="item_con">
                                    <a href="###" class="vide_pic">
                                        <span class="jing">精</span>
                                        <img src="images/pic/img3.jpg" alt="">
                                    </a>
                                    <div class="vide_info">
                                        <p class="vd_title"><a href="###">手动阀多敷法多法达多富达法索多敷</a></p>
                                        <p class="vd_user"><span class="user_ico"></span><a href="###" class="user_name">雷音</a></p>
                                        <p class="vd_info"><span class="info_ico"></span><span class="info_num">500</span></p>
                                    </div>
                                </div>
                            </div>
                            <div class="item">
                                <div class="item_con">
                                    <a href="###" class="vide_pic">
                                        <span class="jing">精</span>
                                        <img src="images/pic/img3.jpg" alt="">
                                    </a>
                                    <div class="vide_info">
                                        <p class="vd_title"><a href="###">手动阀多敷法多法达多富达法索多敷</a></p>
                                        <p class="vd_user"><span class="user_ico"></span><a href="###" class="user_name">雷音</a></p>
                                        <p class="vd_info"><span class="info_ico"></span><span class="info_num">500</span></p>
                                    </div>
                                </div>
                            </div>
                            <div class="item">
                                <div class="item_con">
                                    <a href="###" class="vide_pic">
                                        <span class="jing">精</span>
                                        <img src="images/pic/img3.jpg" alt="">
                                    </a>
                                    <div class="vide_info">
                                        <p class="vd_title"><a href="###">手动阀多敷法多法达多富达法索多敷</a></p>
                                        <p class="vd_user"><span class="user_ico"></span><a href="###" class="user_name">雷音</a></p>
                                        <p class="vd_info"><span class="info_ico"></span><span class="info_num">500</span></p>
                                    </div>
                                </div>
                            </div>
                        </section>
                        <section class="mod_dashen swiper-slide">
                            <div class="item">
                                <a href="###" class="user_pic">
                                    <img src="images/pic/img3.jpg" alt="">
                                </a>
                                <div class="info">
                                    <p class="user"><span class="user_ico"></span><a href="###" class="user_name">雷音</a></p>
                                    <p class="fans_info"><span class="num"><em>25万</em>粉丝</span><span class="ico"></span></p>
                                    <p class="brief">我是欧恩波我是欧恩波尔了索拉卡的联发科技尔了索拉卡的联发科技</p>
                                </div>
                                <span class="fans">
                                    <em class="f1">粉</em>    
                                    <em class="f2">已粉</em>    
                                </span>
                            </div>
                                                        <div class="item">
                                <a href="###" class="user_pic">
                                    <img src="images/pic/img3.jpg" alt="">
                                </a>
                                <div class="info">
                                    <p class="user"><span class="user_ico"></span><a href="###" class="user_name">雷音</a></p>
                                    <p class="fans_info"><span class="num"><em>25万</em>粉丝</span><span class="ico"></span></p>
                                    <p class="brief">我是欧恩波我是欧恩波尔了索拉卡的联发科技尔了索拉卡的联发科技</p>
                                </div>
                                <span class="fans">
                                    <em class="f1">粉</em>    
                                    <em class="f2">已粉</em>    
                                </span>
                            </div>
                                                        <div class="item">
                                <a href="###" class="user_pic">
                                    <img src="images/pic/img3.jpg" alt="">
                                </a>
                                <div class="info">
                                    <p class="user"><span class="user_ico"></span><a href="###" class="user_name">雷音</a></p>
                                    <p class="fans_info"><span class="num"><em>25万</em>粉丝</span><span class="ico"></span></p>
                                    <p class="brief">我是欧恩波我是欧恩波尔了索拉卡的联发科技尔了索拉卡的联发科技</p>
                                </div>
                                <span class="fans">
                                    <em class="f1">粉</em>    
                                    <em class="f2">已粉</em>    
                                </span>
                            </div>
                                                        <div class="item">
                                <a href="###" class="user_pic">
                                    <img src="images/pic/img3.jpg" alt="">
                                </a>
                                <div class="info">
                                    <p class="user"><span class="user_ico"></span><a href="###" class="user_name">雷音</a></p>
                                    <p class="fans_info"><span class="num"><em>25万</em>粉丝</span><span class="ico"></span></p>
                                    <p class="brief">我是欧恩波我是欧恩波尔了索拉卡的联发科技尔了索拉卡的联发科技</p>
                                </div>
                                <span class="fans">
                                    <em class="f1">粉</em>    
                                    <em class="f2">已粉</em>    
                                </span>
                            </div>
                                                        <div class="item">
                                <a href="###" class="user_pic">
                                    <img src="images/pic/img3.jpg" alt="">
                                </a>
                                <div class="info">
                                    <p class="user"><span class="user_ico"></span><a href="###" class="user_name">雷音</a></p>
                                    <p class="fans_info"><span class="num"><em>25万</em>粉丝</span><span class="ico"></span></p>
                                    <p class="brief">我是欧恩波我是欧恩波尔了索拉卡的联发科技尔了索拉卡的联发科技</p>
                                </div>
                                <span class="fans">
                                    <em class="f1">粉</em>    
                                    <em class="f2">已粉</em>    
                                </span>
                            </div>
                                                        <div class="item">
                                <a href="###" class="user_pic">
                                    <img src="images/pic/img3.jpg" alt="">
                                </a>
                                <div class="info">
                                    <p class="user"><span class="user_ico"></span><a href="###" class="user_name">雷音</a></p>
                                    <p class="fans_info"><span class="num"><em>25万</em>粉丝</span><span class="ico"></span></p>
                                    <p class="brief">我是欧恩波我是欧恩波尔了索拉卡的联发科技尔了索拉卡的联发科技</p>
                                </div>
                                <span class="fans">
                                    <em class="f1">粉</em>    
                                    <em class="f2">已粉</em>    
                                </span>
                            </div>
                                                        <div class="item">
                                <a href="###" class="user_pic">
                                    <img src="images/pic/img3.jpg" alt="">
                                </a>
                                <div class="info">
                                    <p class="user"><span class="user_ico"></span><a href="###" class="user_name">雷音</a></p>
                                    <p class="fans_info"><span class="num"><em>25万</em>粉丝</span><span class="ico"></span></p>
                                    <p class="brief">我是欧恩波我是欧恩波尔了索拉卡的联发科技尔了索拉卡的联发科技</p>
                                </div>
                                <span class="fans">
                                    <em class="f1">粉</em>    
                                    <em class="f2">已粉</em>    
                                </span>
                            </div>
                                                        <div class="item">
                                <a href="###" class="user_pic">
                                    <img src="images/pic/img3.jpg" alt="">
                                </a>
                                <div class="info">
                                    <p class="user"><span class="user_ico"></span><a href="###" class="user_name">雷音</a></p>
                                    <p class="fans_info"><span class="num"><em>25万</em>粉丝</span><span class="ico"></span></p>
                                    <p class="brief">我是欧恩波我是欧恩波尔了索拉卡的联发科技尔了索拉卡的联发科技</p>
                                </div>
                                <span class="fans">
                                    <em class="f1">粉</em>    
                                    <em class="f2">已粉</em>    
                                </span>
                            </div>
                                                        <div class="item">
                                <a href="###" class="user_pic">
                                    <img src="images/pic/img3.jpg" alt="">
                                </a>
                                <div class="info">
                                    <p class="user"><span class="user_ico"></span><a href="###" class="user_name">雷音</a></p>
                                    <p class="fans_info"><span class="num"><em>25万</em>粉丝</span><span class="ico"></span></p>
                                    <p class="brief">我是欧恩波我是欧恩波尔了索拉卡的联发科技尔了索拉卡的联发科技</p>
                                </div>
                                <span class="fans">
                                    <em class="f1">粉</em>    
                                    <em class="f2">已粉</em>    
                                </span>
                            </div>
                                                        <div class="item">
                                <a href="###" class="user_pic">
                                    <img src="images/pic/img3.jpg" alt="">
                                </a>
                                <div class="info">
                                    <p class="user"><span class="user_ico"></span><a href="###" class="user_name">雷音</a></p>
                                    <p class="fans_info"><span class="num"><em>25万</em>粉丝</span><span class="ico"></span></p>
                                    <p class="brief">我是欧恩波我是欧恩波尔了索拉卡的联发科技尔了索拉卡的联发科技</p>
                                </div>
                                <span class="fans">
                                    <em class="f1">粉</em>    
                                    <em class="f2">已粉</em>    
                                </span>
                            </div>
                        </section>
                        <section class="mod_zhuanti swiper-slide">
                            <ul>
                                <li>
                                    <a href="###">
                                        <img src="images/pic/zt.jpg" alt="" class="pic">
                                        <p>试试的发发发阿斯顿阿斯顿发放淀粉</p>
                                    </a>
                                </li>
                                <li>
                                    <a href="###">
                                        <img src="images/pic/zt.jpg" alt="" class="pic">
                                        <p>试试的发发发阿斯顿阿斯顿发放淀粉</p>
                                    </a>
                                </li>
                                <li>
                                    <a href="###">
                                        <img src="images/pic/zt.jpg" alt="" class="pic">
                                        <p>试试的发发发阿斯顿阿斯顿发放淀粉</p>
                                    </a>
                                </li>
                                <li>
                                    <a href="###">
                                        <img src="images/pic/zt.jpg" alt="" class="pic">
                                        <p>试试的发发发阿斯顿阿斯顿发放淀粉</p>
                                    </a>
                                </li>
                                <li>
                                    <a href="###">
                                        <img src="images/pic/zt.jpg" alt="" class="pic">
                                        <p>试试的发发发阿斯顿阿斯顿发放淀粉</p>
                                    </a>
                                </li>
                                <li>
                                    <a href="###">
                                        <img src="images/pic/zt.jpg" alt="" class="pic">
                                        <p>试试的发发发阿斯顿阿斯顿发放淀粉</p>
                                    </a>
                                </li>
                                <li>
                                    <a href="###">
                                        <img src="images/pic/zt.jpg" alt="" class="pic">
                                        <p>试试的发发发阿斯顿阿斯顿发放淀粉</p>
                                    </a>
                                </li>
                                <li>
                                    <a href="###">
                                        <img src="images/pic/zt.jpg" alt="" class="pic">
                                        <p>试试的发发发阿斯顿阿斯顿发放淀粉</p>
                                    </a>
                                </li>
                            </ul>
                        </section>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <script src="js/swiper-3.4.2.jquery.min.js"></script>
    <script src="js/commen.js"></script>
</body>

</html>